<template>
  <el-container class="user-center">
    <el-header class="user-header">
      <home-header></home-header>
    </el-header>
    <div class="usercot auth">
      <el-container class="main-wrapper">
        <el-aside width="178px">
          <menu-box></menu-box>
        </el-aside>
        <el-main>
          <div class="header-chi" style="margin: 15px 10px 10px 10px;">
            <div class="user-center-title">
              <img src="../../../../assets/image/sanjao.png" alt />
              <span>认证信息</span>
            </div>
          </div>
          <div class="wrapper">
            <div class="box page-part">
              <div
                v-if="this.$store.state.userInfo.isActive === 1 ||  this.$store.state.userInfo.isActive === 2"
                class="box-contain clearfix"
              >
                <div class="yanzeng-cont">
                  <div class="yanzeng-left">
                    <img src="../../../../assets/image/thingsOk.png" alt />
                  </div>
                  <div class="yanzeng-right">
                    <div>
                      <span>真实姓名：{{$store.state.userInfo.realName}}</span>
                      <span class="tongguo" v-if="$store.state.userInfo.isActive === 2">
                        <span class="iconfont icon-duihao"  ></span>
                        审核通过
                        </span>
                      <span class="renzheng" v-else>
                        <span class="iconfont icon-quan-cuo"></span>
                        未认证
                      </span>
                    </div>
                    <div>
                      <span>身份证号：{{$store.state.userInfo.idCard}}</span>
                    </div>
                    <div class="zfz">
                        <span>身份证正面：</span>

                      <div class="img-auth">
                        <!-- <img src="../../../../assets/image/banner-down.png" alt /> -->

                        <img :src="$store.state.userInfo.img1Key" alt />
                      </div>
                      <span class="fan">身份证反面：</span>
                      <div >
                        <span class="img-auth">
                          <!-- <img src="../../../../assets/image/banner-down.png" alt /> -->
                          <img :src="$store.state.userInfo.img2Key" alt />
                        </span>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- <div class="text-center thingsOk">
                  <i
                    v-if="this.$store.state.userInfo.isActive === 1"
                    style="color:red;font-size: 1.5rem;"
                    class="iconfont icon-renzhengzhong"
                  ></i>
                  <img v-else src="../../../../assets/image/thingsOk.png" alt />
                </div>-->
                <!-- <div class="text-center">
                  <i style="color:red;font-size: 1.5rem;" class="iconfont icon-tongguo1"></i>

                </div>-->
                <!-- <div class="auth-box authed-box">
                  <el-row>
                      <el-col>
                      真实姓名：{{$store.state.userInfo.realName}}
                      </el-col>
                  </el-row>
                  <el-row>
                      <el-col>
                      身份证号：{{$store.state.userInfo.idCard}}
                      </el-col>
                  </el-row>
                </div>-->
                <!-- <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>认证信息</span>
                  </div>
                  <div class="text item">
                    <div class="auth-box">
                      <i
                        v-if="$store.state.userInfo.isActive === 2"
                        style="font-size: 2rem;"
                        class="maincolor-font iconfont icon-tongguo1"
                      ></i>
                      <i
                        v-else
                        style="font-size: 2rem;"
                        class="maincolor-font iconfont icon-shenhezhong"
                      ></i>
                      <p>您已通过实名认证</p>
                    </div>
                    <el-row>
                      <el-col>
                        <span class="name">真实姓名：</span>
                        <span class="info">{{$store.state.userInfo.realName}}</span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <span class="name">身份证号：</span>
                        <span class="info">{{$store.state.userInfo.idCard}}</span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <span class="name">身份证正面：</span>
                        <span class="img-auth">
                          <img :src="$store.state.userInfo.img1Key" alt />
                        </span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <span class="name">身份证反面：</span>
                        <span class="img-auth">
                          <img :src="$store.state.userInfo.img2Key" alt />
                        </span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                          <span class="name">手持身份证：</span>
                          <span class="img-auth">
                              <img :src="$store.state.userInfo.img3Key" alt="">
                          </span>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>-->
              </div>
              <div
                v-if="this.$store.state.userInfo.isActive === 0 ||  this.$store.state.userInfo.isActive === 3"
                class="box-contain clearfix"
              >
                <!-- <div class="text-center prompt-box">
                <i v-if="this.$store.state.userInfo.isActive === 1" style="color:red;font-size: 1.5rem;"
                   class="iconfont icon-shenhezhong"></i>
                <i v-else style="color:red;font-size: 1.5rem;" class="iconfont icon-icon-test"></i>
                <p>* 请填写真实有效的验证信息，虚假认证可能会导致账户被冻结，由虚假认证产生的一切后果由用户负责！</p>
                <p>系统自动审核认证，认证成功后不能再修改，请务必如实填写！</p>
                </div>-->
                <div class="auth-box chongzhi-cont">
                  <el-form
                    :hide-required-asterisk="true"
                    :model="form"
                    label-width="100px"
                    ref="ruleForm"
                    :rules="rule"
                    class="demo-form-inline"
                  >
                    <el-form-item label="真实姓名" prop="name">
                      <el-input
                        type="text"
                        class="chongzhi-input"
                        v-model="form.name"
                        placeholder="请输入真实姓名"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号码" prop="idCard">
                      <el-input
                        type="text"
                        class="chongzhi-input"
                        v-model="form.idCard"
                        placeholder="请输入身份证号码"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="身份证正面" prop="idCard">
                      <el-row>
                        <el-col :span="10">
                          <el-upload
                            :with-credentials="true"
                            class="avatar-uploader"
                            :action="admin+'/user/upload.do'"
                            list-type="picture-card"
                            name="upload_file"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                          >
                            <img v-if="form.img1key" :src="form.img1key" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                          </el-upload>
                        </el-col>
                        <el-col :span="14">
                          <img src="../../../../assets/image/img1.jpg" alt />
                        </el-col>
                      </el-row>
                    </el-form-item>
                    <el-form-item label="身份证背面" prop="idCard">
                      <el-row>
                        <el-col :span="10">
                          <el-upload
                            :with-credentials="true"
                            class="avatar-uploader"
                            list-type="picture-card"
                            name="upload_file"
                            :action="admin+'/user/upload.do'"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess2"
                            :before-upload="beforeAvatarUpload2"
                          >
                            <img v-if="form.img2key" :src="form.img2key" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                          </el-upload>
                        </el-col>
                        <el-col :span="14">
                          <img src="../../../../assets/image/img2.jpg" alt />
                        </el-col>
                      </el-row>
                    </el-form-item>
                    <!-- <el-form-item label="手持身份证" prop="idCard">
                      <el-row>
                          <el-col :span="10">
                              <el-upload
                                :with-credentials='true'
                                  class="avatar-uploader"
                                  list-type="picture-card"
                                  name="upload_file"
                                  :action="admin+'/user/upload.do'"
                                  :show-file-list="false"
                                  :on-success="handleAvatarSuccess3"
                                  :before-upload="beforeAvatarUpload3">
                                  <img v-if="form.img3key" :src="form.img3key" class="avatar">
                                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                              </el-upload>
                          </el-col>
                          <el-col :span="14">
                              <img src="../../../../assets/image/img3.jpg" alt="">
                          </el-col>
                      </el-row>
                    </el-form-item>-->
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button type="primary" :loading="islogin" @click="submit('ruleForm')">认证</el-button>
                    <!-- <el-button  type="primary" :loading="islogin" @click="submit('ruleForm')">认证</el-button> -->
                  </div>
                </div>
              </div>
              <div class="chongzhi-bizhi">
                <div class="chongzhi-bizhi-cont">
                  <div class="youyi">友谊提示：</div>
                  <div class="chongzhi-item">
                    <span class="circle">1</span>
                    <span>新用户注册后必须通过添加银行卡。</span>
                  </div>
                  <div class="chongzhi-item">
                    <span class="circle">2</span>
                    <span>用户只能添加一张本人银行卡。</span>
                  </div>
                  <div class="chongzhi-item">
                    <span class="circle">3</span>
                    <span>真实姓名必须和出金银行卡名一致。</span>
                  </div>
                </div>
                <div class="right">

                </div>
              </div>
            </div>
          </div>
          <!-- <home-footer :siteInfo="siteInfo"></home-footer> -->
        </el-main>
      </el-container>
    </div>
  </el-container>
</template>

<script>
import HomeHeader from "../../../../components/HeaderOrder";
import HomeFooter from "../../../../components/Footer";
import MenuBox from "../menu";
import * as api from "../../../../axios/api";

export default {
  components: {
    HomeHeader,
    HomeFooter,
    MenuBox,
  },
  props: {},
  data() {
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入身份证号码"));
      } else {
        let myreg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; // 身份证校验
        if (!myreg.test(value)) {
          callback(new Error("请输入正确的身份证号码"));
        }
        callback();
      }
    };
    return {
      hasAuth: false,
      form: {
        name: "",
        idCard: "",
        img1key: "",
        img2key: "",
        img3key: "",
      },
      rule: {
        name: [{ required: true, message: "请输入真实姓名", trigger: "blur" }],
        idCard: [
          {
            required: true,
            validator: validatePass,
            message: "请输入身份证",
            trigger: "blur",
          },
        ],
        img1key: [
          { required: true, message: "请上传身份证图片", trigger: "blur" },
        ],
        img2key: [
          { required: true, message: "请上传身份证图片", trigger: "blur" },
        ],
        img3key: [
          { required: false, message: "请上传身份证图片", trigger: "blur" },
        ],
      },
      islogin: false,
      admin: "",
    };
  },
  watch: {},
  computed: {},
  created() {
    if (this.$store.state.userInfo.idCard) {
      this.form.idCard = this.$store.state.userInfo.idCard;
      this.form.name = this.$store.state.userInfo.realName;
      if (this.$store.state.userInfo.isActive === 2) {
        this.hasAuth = true;
      }
    } else {
      this.getUserInfo();
    }
  },
  mounted() {
    this.admin = process.env.API_HOST;
    if (this.admin === undefined) {
      this.admin = "";
    }
    this.$store.state.userMenu = "2-9";
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.form.img1key = res.data.url;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("请选择jpg或者png的图片格式!");
      }
      // if (!isLt2M) {
      //     this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess2(res, file) {
      this.form.img2key = res.data.url; // URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload2(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      return isJPG && isLt2M;
    },
    handleAvatarSuccess3(res, file) {
      this.form.img3key = res.data.url; // URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload3(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("请选择jpg或者png的图片格式!");
      }
      return isJPG && isLt2M;
    },
    async getUserInfo() {
      // 获取用户信息
      let data = await api.getUserInfo();
      if (data.status === 0) {
        // 判断是否登录
        this.$store.state.userInfo = data.data;
        if (this.$store.state.userInfo.isActive === 2) {
          this.hasAuth = true;
        }
      } else {
      }
    },
    submit(formName) {
      // 提交
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 实名认证
          let opts = {
            realName: this.form.name,
            idCard: this.form.idCard,
            img1key: this.form.img1key,
            img2key: this.form.img2key,
            img3key: this.form.img3key,
          };
          this.islogin = true;
          let data = await api.userAuth(opts);
          if (data.status === 0) {
            this.$message.success("认证成功!");
            this.getUserInfo();
          } else {
            this.$message.success(data.msg);
          }
          this.islogin = false;
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="">
</style>
<style lang="less" scoped>
.red-bg {
  .yanzeng-cont {
    display: flex;
      .tongguo,.renzheng{
      border-radius: 3px;
      padding: 2px 5px;
      display: inline-block;
      background-color:rgb(4, 130, 62);
      margin: 0 5px;
      color: #fff;
    }
    .renzheng{
      background-color: rgb(230, 0, 62);
    }
    .yanzeng-left {
      height: 60px;
      width: 60px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .yanzeng-right {
      margin-left: 10px;
    }
    .yanzeng-right > div {
      margin-bottom: 20px;
      // margin-left: 10px;
    }
    .zfz {
      display: flex;
      .fan {
        margin-left: 30px;
      }
    }
  }
  .youyi {
    color: #000;
  }
  .chongzhi-bizhi {
    .right {
      width: 106px;
      height: 134px;

      background: url("../../../../assets/image/youqingtishi1.png") no-repeat;
    }
    margin-top: 50px;

    background-color: #E5E5E5;
    display: flex;
    padding: 40px;
    justify-content: space-between;
    .chongzhi-bizhi-cont .chongzhi-item {
      margin: 15px 0;
      color: #000;
      .circle {
        display: inline-block;
        width: 15px;
        text-align: center;
        height: 15px;
        border: 1px solid rgb(121, 121, 121);
        border-radius: 50%;
        line-height: 15px;
      }
    }
  }
  .chongzhi-cont {
    position: relative;
    .left {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .xianshi-cont {
      display: flex;
      justify-content: space-between;
    }

    .chongzhi-img {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .chongzhi-type {
      display: flex;
      margin-top: 20px;
      margin-bottom: 20px;
      .chongzhi-type-item {
        margin-right: 20px;
      }
    }
    .chongzhi-type > span {
      display: inline-block;
      width: 85px;
    }
    .chongzhi-btn-cont {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      .chongzhi-btn {
        width: 80%;
        border-radius: 50px;
        text-align: center;
        height: 40px;
        background-color: #c11815;
        color: #fff;
        line-height: 40px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        margin-top: 20px;
      }
    }

    .chongzhi-input {
      display: flex;
      align-items: center;
      width: 90%;
      background: none;
    }
    .chongzhi-input > span {
      display: inline-block;
      width: 100px;
    }
  }
}
.black-bg {
  .yanzeng-cont {
    display: flex;
      .tongguo,.renzheng{
      padding: 2px 5px;
      display: inline-block;
      background-color:rgb(4, 130, 62);
      border-radius: 2px;
      margin: 0 5px;
    }
    .renzheng{
      background-color: rgb(230, 0, 62);
    }
    .yanzeng-left {
      height: 60px;
      width: 60px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .yanzeng-right {
      margin-left: 10px;
    }
    .yanzeng-right > div {
      margin-bottom: 20px;
      // margin-left: 10px;
    }
    .zfz {
      display: flex;
      .fan {
        margin-left: 30px;
      }
    }
  }
  .youyi {
    color: #fff;
  }
  .chongzhi-bizhi {
    .right {
      width: 106px;
      height: 134px;

      background: url("../../../../assets/image/youqingtishi.png") no-repeat;
    }
    margin-top: 50px;

    background-color: #191e2b;
    display: flex;
    padding: 40px;
    justify-content: space-between;
    .chongzhi-bizhi-cont .chongzhi-item {
      margin: 15px 0;
      color: #7e8086;
      .circle {
        display: inline-block;
        width: 15px;
        text-align: center;
        height: 15px;
        border: 1px solid rgb(121, 121, 121);
        border-radius: 50%;
        line-height: 15px;
      }
    }
  }
  .chongzhi-cont {
    position: relative;
    .left {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .xianshi-cont {
      display: flex;
      justify-content: space-between;
    }

    .chongzhi-img {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .chongzhi-type {
      display: flex;
      margin-top: 20px;
      margin-bottom: 20px;
      .chongzhi-type-item {
        margin-right: 20px;
      }
    }
    .chongzhi-type > span {
      display: inline-block;
      width: 85px;
    }
    .chongzhi-btn-cont {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      .chongzhi-btn {
        width: 80%;
        border-radius: 50px;
        text-align: center;
        height: 40px;
        background-color: #c11815;
        color: #fff;
        line-height: 40px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        margin-top: 20px;
      }
    }

    .chongzhi-input {
      display: flex;
      align-items: center;
      width: 90%;
      background: none;
    }
    .chongzhi-input > span {
      display: inline-block;
      width: 100px;
    }
  }
}

.header-chi {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.code {
  font-size: 12px;
  color: #999;
}

.auth-box {
  margin-top: 20px;

  .el-row {
    margin-bottom: 10px;
  }
}

.authed-box {
  .el-row {
    padding-top: 40px;
    width: 400px;
    margin: 0 auto;
  }
}

.thingsOk {
  margin: 30px;

  img {
    width: 150px;
  }
}

.box-card {
  position: relative;

  .el-row {
    line-height: 30px;
  }

  .auth-box {
    position: absolute;
    top: 0px;
    right: 20%;
  }

  .name {
    width: 96px;
    text-align: right;
    display: inline-block;
    color: #6e6e6e;
  }

  .info {
    font-size: 16px;
  }
}

.wrapper {
  .demo-form-inline {
    // width: 400px;
    margin: 20px auto;
  }

  .auth-box {
    .dialog-footer {
      width: 400px;
      margin: 0 auto;

      .el-button {
        margin-left: 100px;
        width: 300px;
      }
    }
  }

  .prompt-box {
    padding-bottom: 20px;
    color: #f44336;

    p {
      line-height: 24px;
    }
  }

  .rule-box {
    margin-top: 30px;
    line-height: 26px;
    margin-left: 120px;
  }

  .img-auth {
    img {
      max-height: 230px;
      max-width: 80%;
    }
  }
}

.el-upload {
  /deep/ .el-upload--picture-card {
    width: 230px;
  }

  img {
    max-height: 100%;
    max-width: 100%;
  }
}
</style>
